<template>
  <div>
    <div class="root">
      <div style="display: flex">
        <a-breadcrumb
          style="font-size: 18px; font-weight: bold; margin-bottom: 20px"
        >
          <a-breadcrumb-item>读者信息管理</a-breadcrumb-item>
        </a-breadcrumb>
      </div>
      <a-space :size="12" style="margin-bottom: 10px">
        <a-button @click="showModal" type="primary">新增图书</a-button>
        <a-button @click="showModal" type="primary"
          >统计库存不足的书籍</a-button
        >
        <a-select
          ref="select"
          v-model:value="value1"
          placeholder="图书分类"
          style="width: 120px"
          @focus="focus"
          @change="handleChange"
        >
          <a-select-option value="jack">Jack</a-select-option>
          <a-select-option value="lucy">Lucy</a-select-option>
          <a-select-option value="disabled" disabled>Disabled</a-select-option>
          <a-select-option value="Yiminghe">yiminghe</a-select-option>
        </a-select>
        <a-select
          ref="select"
          v-model:value="value1"
          placeholder="图书标签"
          style="width: 120px"
          @focus="focus"
          @change="handleChange"
        >
          <a-select-option value="jack">Jack</a-select-option>
          <a-select-option value="lucy">Lucy</a-select-option>
          <a-select-option value="disabled" disabled>Disabled</a-select-option>
          <a-select-option value="Yiminghe">yiminghe</a-select-option>
        </a-select>
        <a-input-group compact>
          <a-select
            v-model:value="value3"
            placeholder="选择搜索内容"
            style="width: 150px"
          >
            <a-select-option value="Zhejiang">Zhejiang</a-select-option>
            <a-select-option value="Jiangsu">Jiangsu</a-select-option>
          </a-select>
          <a-input-search
            v-model:value="value"
            placeholder="输入搜索信息"
            style="width: 200px"
            @search="onSearch"
          />
        </a-input-group>
      </a-space>
      <a-table
        :dataSource="data"
        :row-key="(record) => record.elec_meter_id"
        :columns="columns"
        bordered
      >
        <template
          #filterDropdown="{
            setSelectedKeys,
            selectedKeys,
            confirm,
            column,
            clearFilters,
          }"
        >
          <div style="padding: 8px">
            <a-input
              ref="searchInput"
              :placeholder="`搜索 ${column.title}`"
              :value="selectedKeys[0]"
              style="width: 188px; margin-bottom: 8px; display: block"
              @change="
                (e) => setSelectedKeys(e.target.value ? [e.target.value] : [])
              "
              @pressEnter="
                handleSearch(selectedKeys, confirm, column.dataIndex)
              "
            />
            <a-button
              type="primary"
              size="small"
              style="width: 90px; margin-right: 8px"
              @click="handleSearch(selectedKeys, confirm, column.dataIndex)"
            >
              <template #icon><SearchOutlined /></template>
              搜索
            </a-button>
            <a-button
              size="small"
              style="width: 90px"
              @click="handleReset(clearFilters)"
            >
              重置
            </a-button>
          </div>
        </template>
        <template #filterIcon="filtered">
          <search-outlined
            :style="{ color: filtered ? '#108ee9' : undefined }"
          />
        </template>
        <template #customRender="{ text, column }">
          <span v-if="searchText && searchedColumn === column.dataIndex">
            <template
              v-for="(fragment, i) in text
                .toString()
                .split(new RegExp(`(?<=${searchText})|(?=${searchText})`, 'i'))"
            >
              <mark
                v-if="fragment.toLowerCase() === searchText.toLowerCase()"
                class="highlight"
                :key="i"
              >
                {{ fragment }}
              </mark>
              <template v-else>{{ fragment }}</template>
            </template>
          </span>
          <template v-else>
            {{ text }}
          </template>
        </template>
      </a-table>
    </div>
    <a-modal v-model:visible="visible" title="新增图书" @ok="addBook">
      <a-form :model="formState">
        <a-form-item label="Activity name" :wrapper-col="wrappercol">
          <a-input v-model:value="formState.name" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
    
<script>
//引入ref函数，用于构造单向绑定数据
import {
  ref,
  reactive,
  computed,
  nextTick,
  createVNode,
  defineComponent,
} from "vue";
//引入useRouter函数，用于获取路由器对象
import { useRouter } from "vue-router";
//引入函数，用于向服务端发送get请求
import { get, del, post, getBlob, put, tip, removeLocalToken } from "@/common";
import { SearchOutlined } from "@ant-design/icons-vue";

export default defineComponent({
  components: {
    SearchOutlined,
  },
  setup() {
    const columns = [
      {
        title: "电表ID",
        dataIndex: "elec_meter_id",
        slots: {
          filterDropdown: "filterDropdown",
          filterIcon: "filterIcon",
          customRender: "customRender",
        },
        onFilter: (value, record) =>
          record.name.toString().toLowerCase().includes(value.toLowerCase()), // 记录转小写
        onFilterDropdownVisibleChange: (visible) => {},
      },
      {
        name: "Name",
        dataIndex: "name",
        key: "name",
      },
      {
        title: "Age",
        dataIndex: "age",
        key: "age",
      },
      {
        title: "Address",
        dataIndex: "address",
        key: "address",
      },
      {
        title: "Tags",
        key: "tags",
        dataIndex: "tags",
      },
      {
        title: "Action",
        key: "action",
      },
    ];
    const data = [
      {
        key: "1",
        name: "John Brown",
        age: 32,
        address: "New York No. 1 Lake Park",
        tags: ["nice", "developer"],
      },
      {
        key: "2",
        name: "Jim Green",
        age: 42,
        address: "London No. 1 Lake Park",
        tags: ["loser"],
      },
      {
        key: "3",
        name: "Joe Black",
        age: 32,
        address: "Sidney No. 1 Lake Park",
        tags: ["cool", "teacher"],
      },
      {
        key: "1",
        name: "John Brown",
        age: 32,
        address: "New York No. 1 Lake Park",
        tags: ["nice", "developer"],
      },
      {
        key: "2",
        name: "Jim Green",
        age: 42,
        address: "London No. 1 Lake Park",
        tags: ["loser"],
      },
      {
        key: "3",
        name: "Joe Black",
        age: 32,
        address: "Sidney No. 1 Lake Park",
        tags: ["cool", "teacher"],
      },
    ];

    // 获取电表信息
    const elecInfoList = ref([]);
    const getElecInfo = () => {
      // get("/manager/elecMeter/info").then((res) => {
      //   console.log(res);
      //   elecInfoList.value = res.data;
      // });
    };
    const visible = ref(false);
    const addElecParam = reactive({
      elec_meter_id: "",
    });
    const showModal = () => {
      visible.value = true;
    };
    const addBook = () => {
      visible.value = false;
    };
    const formState = reactive({
      name: "",
    });
    const wrappercol = { span: 14, offset: 4 };

    const state = reactive({
      searchText: "",
      searchedColumn: "",
    });
    const searchInput = ref();
    const handleSearch = (selectedKeys, confirm, dataIndex) => {
      confirm();
      state.searchText = selectedKeys[0];
      state.searchedColumn = dataIndex;
    };
    const handleReset = (clearFilters) => {
      clearFilters();
      state.searchText = "";
    };

    getElecInfo();
    return {
      columns,
      data,
      getElecInfo,
      showModal,
      addBook,
      visible,
      formState,
      wrappercol,
      searchInput,
      state,
      handleSearch,
      handleReset,
    };
  },
});
</script>

<style lang="scss">
.root {
  padding: 20px;
  height: 750px;
  .pagination {
    padding: 10px;
    text-align: right;
  }
}
</style>